<template>
  <section>
    <!--新增界面-->
    <el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
      <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
        <el-form-item label="学生姓名" prop="name">
          <el-input v-model="addForm.name" auto-complete="off" :disabled="static"></el-input>
        </el-form-item>
        <el-form-item label="学生微信" prop="wechat">
          <el-input v-model="addForm.wechat" auto-complete="off" :disabled="static"></el-input>
        </el-form-item>
        <el-form-item label="学生电话" prop="phone">
          <el-input v-model="addForm.phone" auto-complete="off" :disabled="static"></el-input>
        </el-form-item>
        <el-form-item label="学生班级" prop="squad">
          <el-input v-model="addForm.squad" auto-complete="off" :disabled="static"></el-input>
        </el-form-item>
        <el-form-item label="预约时间" prop="time">
          <el-date-picker
            v-model="addForm.time"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            :disabled="static"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="帮扶状态" prop="state" auto-complete="off">
          <el-select v-model="addForm.state" placeholder="请选择"
                     style="width:200px"
          >
            <el-option
              v-for="item in label"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="帮扶老师" prop="teacher" auto-complete="off">
          <el-select v-model="addForm.teacher" placeholder="请选择"
                     style="width:200px"
          >
            <el-option
              v-for="item in teachers"
              :key="item.id"
              :label="item.name"
              :value="item.name"
              :disabled="static"
            >
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.type }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="问题类型" prop="issue" auto-complete="off">
          <el-select v-model="addForm.issue" placeholder="请选择"
                     style="width:200px"
          >
            <el-option
              v-for="item in deyList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
              :disabled="static"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="问题描述" prop="depicted">
          <el-input type="textarea" v-model="addForm.depicted" :disabled="static"></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false" icon="el-icon-close">取消</el-button>
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading" icon="el-icon-check">提交</el-button>
      </div>
    </el-dialog>


  </section>
</template>

<script>
import { getList } from '@/api/teacher/teacher'
import { getavse, getLists, getdalete } from '@/api/teacher/student'
import { deyList, labelList } from '@/api/teacher/Label'

export default {
  name: 'common',
  data() {
    return {
      addFormVisible: false,
      addLoading: false,
      static: false,
      // 条件
      filters: {
        type: '',
        name: ''
      },
      deyList: [],
      teachers: [],
      tableData: [],
      types: [],
      label: [],
      addForm: {
        id: '',
        name: '',
        wechat: '',
        phone: '',
        squad: '',
        time: '',
        teacher: '',
        issue: '',
        state: '',
        depicted: ''
      },
      addFormRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        tel: [
          { required: true, message: '请输入电话', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请输入性别', trigger: 'blur' }
        ]
      }

    }
  },
  methods: {
    del: function(row) {
      getdalete(row.id).then(response => {
        if (response) {
          this.$message({ message: '删除成功', type: 'success' })
          this.list()
        } else {
          this.$message({ message: '删除失败', type: 'success' })
        }
      }).cache(error => {
        this.$message({ message: '数据加载失败[' + error.message + ']', type: 'error' })
      })

    },
    selectPage(val) {
      this.page = val
      this.getTableData()
    },
    getTableData() {
      console.log('123')
    },
    add() {
      for (let p in this.addForm) {
        this.addForm[p] = ''
      }
      this.addFormVisible = true
      this.static = false
    },
    // 添加
    addSubmit: function() {
      getavse(this.addForm).then(response => {
        if (response) {
          this.$message({ message: '提交成功', type: 'success' })
          this.addFormVisible = false
          this.list()
        } else {
          this.$message({ message: '数据加载失败[' + message + ']', type: 'error' })
        }
      }).catch(error => {
        this.listLoading = false
        this.$message({ message: '数据加载失败[' + error.message + ']', type: 'error' })
      })

    },
    resetForm(filters) {
    },
    getFileName(files) {
      return files.slice(0, 3)
    },
    fileData(row) {
      let arr = []
      row.types.forEach((item, index) => {
        if (index > 2) {
          return
        }
        arr.push(item.name)
      })
      return arr.join(',')
    },
    list() {
      getLists().then(response => {
        this.tableData = response.data
      }).catch(reason => {
        console.log(reason)
      })
    },
    type() {
      getType().then(response => {
        console.log(response.data)
        this.types = response.data
      }).catch(reason => {
        console.log(reason)
      })
    },
    edit(row) {
      for (let p in this.addForm) {
        this.addForm[p] = row[p]
      }
      this.addFormVisible = true
      this.static = true
    },
    labelList() {
      labelList().then(response => {
        this.label = response.data
      }).cache(reason => {
        this.$message({ message: '数据加载失败[' + error.message + ']', type: 'error' })
      })
    },

    // 获取老师
    getList() {
      getList().then(response => {
        this.teachers = response.data
        this.labelList()
      }).cache(reason => {
          this.$message({ message: '数据加载失败[' + error.message + ']', type: 'error' })
        }
      )
    },
    // 问题
    getdeyList() {

      deyList().then(response => {
        this.deyList = response.data
        this.getList()
      }).cache(response => {
        this.$message({ message: '数据加载失败[' + error.message + ']', type: 'error' })
      })

    }
  },
  mounted() {
    this.getdeyList()
  },
  created() {
    this.list()
  }

}
</script>

